<template>
	<div>
		<el-container class="home-container">
			<el-header height="85px">
				<div class="gy_tou_z">
					<div class="gy_tou">
						<div class="tou_left">
							<img class="logo" src="../assets/images/logo.png">
						</div>
						<div class="tou_right">
							<ul>
								<li  v-for="(item,index) in Navlist" :key="index" @click="NavClick(item.navpath,index)" :class="Navactive==index?'active':''"><span>{{item.navname}}</span></li>
							</ul>
							<p class="xian"></p>
							<div class="right_phone">
								<img src="../assets/images/phone.png">
								<span>0362-5125465</span>
							</div>
						</div>
					</div>
				</div>
			</el-header>
			<el-main>
				<!-- 路由占位符 -->
				<router-view></router-view>
			</el-main>
			<el-footer height="40px">
				<div class="gy_di_z">
					<div class="gy_di">
						<div class="di_left">
							<span class="col">COPYRIGHT</span>
							<span>&nbsp;&nbsp;©&nbsp;&nbsp;ALL&nbsp;&nbsp;RIGHTS&nbsp;&nbsp;RESERVED&nbsp;&nbsp;重庆苏福节能科技有限公司&nbsp;&nbsp;版权所有</span>
						</div>
						<div class="di_right">
							<ul>
								<li><a href="#">法律声明</a></li>
								<li><a href="#">隐私保护</a></li>
								<li><a href="SF_lianxi.html">联系我们</a></li>
							</ul>
						</div>
					</div>
				</div>
			</el-footer>
		</el-container>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				Navactive: 0,
				Navlist: [{
					navname: '首页',
					navpath: '/index',
					navid: '0',
				}, {
					navname: '关于我们',
					navpath: '/about',
					navid: '1',
				}, {
					navname: '新闻中心',
					navpath: '/news',
					navid: '2',
				}, {
					navname: '案例展示',
					navpath: '/case',
					navid: '3',
				}, {
					navname: '产品展示',
					navpath: '/product',
					navid: '4',
				}, {
					navname: '公司资质',
					navpath: '/qualification',
					navid: '5',
				}, {
					navname: '企业文化',
					navpath: '/culture',
					navid: '6',
				}, {
					navname: '人才招聘',
					navpath: '/personnel',
					navid: '7',
				}, {
					navname: '联系我们',
					navpath: '/contact',
					navid: '8',
				}]
			}
		},
		created () {
			// 在sessionStorage获取当前页面高亮
		    if(sessionStorage.getItem("key") == null) {
				this.Navactive = 0
			}
		    this.Navactive = sessionStorage.getItem('index')
		},
		methods: {
			
			// 编程式导航跳转并记录高亮，将当前高亮记录到sessionStorage中
			NavClick(path,index) {
				this.Navactive = index
				sessionStorage.setItem('index',index)
				sessionStorage.setItem('leftindex',0)
				this.$router.push(path)
			}
		}
	}
</script>

<style scoped>
	.el-header {
		padding: 0;
		height: 85px;
	}

	.home-container {
		height: 100%;
	}

	.el-main {
		padding: 0;
	}

	.el-footer {
		padding: 0;
		height: 60px;
	}

	/*pc头*/
	.gy_tou_z {
		width: 100%;
		height: 85px;
		float: left;
		text-align: center;
	}

	.gy_tou_z .gy_tou {
		width: 1200px;
		margin: 0 auto;
		background: #f00;
	}

	.gy_tou .tou_left {
		float: left;
	}

	.tou_left .logo {
		width: 120px;
		height: 50px;
		float: left;
		margin-top: 18.5px;
	}

	.gy_tou .tou_right {
		float: right;
	}

	.tou_right ul {
		width: auto;
		height: 58px;
		float: left;
	}

	.tou_right ul li {
		width: auto;
		height: 56px;
		float: left;
		border-top: 2px solid #fff;
	}

	.tou_right ul .active {
		width: auto;
		height: 56px;
		float: left;
		border-top: 2px solid #0075c5;
	}

	.tou_right ul .active span {
		float: left;
		margin-top: 27px;
		padding: 5px 15px;
		background: #0069b1;
		border-radius: 3px;
		font-size: 16px;
		color: #fff;
	}

	.tou_right ul li span {
		float: left;
		margin-top: 27px;
		padding: 5px 15px;
		background: #fff;
		border-radius: 3px;
		font-size: 16px;
		color: #858585;
		cursor: pointer;
	}

	.tou_right .xian {
		float: left;
		width: 1px;
		height: 30px;
		background: #d4d4d4;
		margin-top: 27.5px;
	}

	.tou_right .right_phone {
		float: left;
		width: auto;
		height: 30px;
	}

	.right_phone img {
		float: left;
		width: auto;
		height: 25px;
		margin-left: 15px;
		margin-top: 30px;
	}

	.right_phone span {
		float: left;
		width: auto;
		height: 30px;
		font-size: 20px;
		color: #0e76bd;
		line-height: 30px;
		margin-left: 5px;
		margin-top: 27.5px;
	}

	/*pc 底*/
	.gy_di_z {
		width: 100%;
		height: 40px;
		background: #373737;
		float: left;
		text-align: center;
	}

	.gy_di {
		width: 1200px;
		height: 40px;
		margin: 0 auto;
	}

	.gy_di .di_left {
		float: left;
	}

	.di_left span {
		float: left;
		font-size: 14px;
		line-height: 40px;
		margin-right: 10px;
		color: #7b7b7b;
	}

	.di_left .col {
		color: #0069b1;
	}

	.gy_di .di_right {
		float: right;
	}

	.di_right ul li {
		float: left;
		font-size: 14px;
		line-height: 40px;
		margin-left: 10px;
	}

	.di_right ul li a {
		color: #7b7b7b;
	}
</style>
